<template>
<div>
  <template v-for="item in indexList">
      <van-index-bar :sticky-offset-top="46">
        <van-index-anchor :index="item.code" />
          <template v-for="name in item.list">
            <van-cell :title="name" @click="btn(name)" />
            <!-- <vant-cell :title="name"></vant-cell> -->
          </template>
      </van-index-bar>
    </template>
</div>
</template>

<script>
import {getUserList} from '@/api/request/login.js'
import VantCell from '../common/VantCell.vue';
export default {
  components: { VantCell },
  data() {
    return {
      indexList: [],
      textList: [
        "v11",
        "aaa",
        "aab",
        "ffg",
        "aac",
        "baa",
        "fff",
        "bab",
        "bac",
        "bbx",
        "aac",
        "ffe",
        "ges",
        "vag",
      ],
    };
  },
  methods: {
    btn(event){
      console.log(event);
    },
    sort() {
       var list = this.textList.sort();
    // console.log(list);

    var groups = []
    let childList = []
    for (var i = 0; i < list.length; i++) {
     let itemChar = list[i].charAt(0)
    //  let preChar = list[i].charAt(0)
    let preChar;
     if (i != 0) {
      preChar = list[i - 1].charAt(0)
     }
     // 当前首字母和上一个不一样,把分组放进列表
     if (itemChar != preChar) {
      groups.push({code: preChar, list: childList})
      childList = []
     }
     childList.push(list[i])
     
     // 循环结束,把最后的分组放进去
     if(i == list.length -1) {
      groups.push({code: itemChar, list: childList})
     }
    }
    this.indexList = groups;
    // console.log('123123', this.indexList)
    }
  },
created() {
   this.sort()
  },
}
</script>

<style>
:root{
  --van-index-anchor-background-color: #f0efef;
}
</style>